<template>
  <div>
    <section class="recom">
      <h3 class="title">搜索“{{keywords}}”</h3>
      <ul>
        <li class="recomitem" v-for="item in searchTipData" :key="item.id">
          <i class="iconfont icon-sousuo"></i>
          <span class="thide" @click.stop="$emit('keyword', item.keyword)">{{item.keyword}}</span>
        </li>

      </ul>
    </section>
  </div>
</template>

<script>
import { getToSearchSuggestions } from "@/api/search ";
export default {
  props: ["keywords"],
  data() {
    return {
      searchTipData: [],//搜索提示数据
    };
  },
  watch: {
    keywords() {
      this.getToSearchSuggestionsFun();
    },
  },
  methods: {
    // 获取搜索建议
    getToSearchSuggestionsFun() {
      getToSearchSuggestions(this.keywords).then((data) => {
        if (data.code == 200) {
          this.searchTipData = data.result.allMatch;
        }
      });
    },
  },
  created() {
    this.getToSearchSuggestionsFun();
  },
}
</script>


<style lang="scss" scoped>

.recom {
  margin: 0 auto;
  .title {
    height: 50px;
    margin: 0 10px;
    padding-right: 10px;
    line-height: 50px;
    color: #507daf;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  ul {
    .recomitem {
        display: flex;
        align-items: center;
        height: 45px;
        margin: 0 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        font-size: 15px;
    
        i {
          margin-right: 7px;
          color: #b1b1b2;
        }
      }
    }
    }
</style>